<template>
  <div>
    <div class="edit_container">
		<h1>富文本编辑器(一) - Quill编辑器</h1>
      <quill-editor
              :options="editorOption"
              @blur="onEditorBlur($event)"
              @change="onEditorChange($event)"
              @focus="onEditorFocus($event)"
              ref="myQuillEditor"
              v-model="content"
      ></quill-editor>
      <el-button type="primary" @click="saveHtml">保存</el-button>
    </div>
	<!-- <div class="ql-container ql-snow">
	      <div class="ql-editor">
			  <div v-html="content"></div>
		  </div>
	</div>
	<div class="edit">
	  <mavon-editor v-model="model.content"></mavon-editor>
	  <el-button type="primary" size="small" @click="submit">发表</el-button>
	</div> -->
	<div class="edit">
		<h1>富文本编辑器(二) - Markdown编辑器</h1>
	      <mavon-editor
	              v-model="model.content"
	              :placeholder="'Edit ···'"
	              ref="md"
	              @imgAdd="imgAdd"
	              @imgDel="imgDel"
	              :toolbars="toolbars"
	              :toolbarsBackground="'#f9f9f9'"
	              style="height: calc(100vh - 50px)"
	      ></mavon-editor>
	      <el-button type="primary" @click="submit">发表</el-button>
	    </div>
	    <el-card>
	            <h1 style="text-align: center">预览</h1>
	            <mavon-editor
	                      v-model="model.content"
	                      :subfield="false"
	                      :boxShadow="false"
	                      defaultOpen="preview"
	                      :toolbarsFlag="false"
	            ></mavon-editor>
	    </el-card>
  </div>
</template>

<script>
import {deleteFile, uploadImage} from '@/api/fileUploadAndDownload'
	
export default {
  name: 'App',
  data() {
    return {
      content: `<p>hello 欢迎使用quill编辑器</p>`,
      editorOption: {
        theme: 'snow',
        placeholder: '请输入正文'
      },
	  model: {
		  content:'# Python异步爬虫\n' +
		                  '\n' +
		                  '```python\n' +
		                  'import time\n' +
		                  'import asyncio\n' +
		                  'import requests\n' +
		                  ' \n' +
		                  ' \n' +
		                  'async def test2(i):\n' +
		                  '    r = await other_test(i)\n' +
		                  '    print(i,r)\n' +
		                  ' \n' +
		                  ' \n' +
		                  'async def other_test(i):\n' +
		                  '    r = requests.get(i)\n' +
		                  '    print(i)\n' +
		                  '    await asyncio.sleep(4)\n' +
		                  '    print(time.time()-start)\n' +
		                  '    return r\n' +
		                  ' \n' +
		                  ' \n' +
		                  'if __name__ == \'__main__\':\n' +
		                  '    url = ["https://segmentfault.com/p/1210000013564725",\n' +
		                  '           "https://www.jianshu.com/p/83badc8028bd",\n' +
		                  '           "https://www.baidu.com/"]\n' +
		                  '    task = [asyncio.ensure_future(test2(i)) for i in url]\n' +
		                  '    start = time.time()\n' +
		                  '    asyncio.get_event_loop().run_until_complete(asyncio.wait(task))\n' +
		                  '\n' +
		                  '```'
	  },
	  img_file: [],
	  toolbars: {
		  bold: true, // 粗体
		  italic: true, // 斜体
		  header: true, // 标题
		  underline: true, // 下划线
		  strikethrough: true, // 中划线
		  mark: true, // 标记
		  superscript: true, // 上角标
		  subscript: true, // 下角标
		  quote: true, // 引用
		  ol: true, // 有序列表
		  ul: true, // 无序列表
		  link: true, // 链接
		  imagelink: true, // 图片链接
		  code: true, // code
		  table: true, // 表格
		  fullscreen: true, // 全屏编辑
		  readmodel: false, // 沉浸式阅读
		  htmlcode: true, // 展示html源码
		  help: true, // 帮助
		  /* 1.3.5 */
		  undo: true, // 上一步
		  redo: true, // 下一步
		  trash: true, // 清空
		  save: false, // 保存（触发events中的save事件）
		  /* 1.4.2 */
		  navigation: true, // 导航目录
		  /* 2.1.8 */
		  alignleft: true, // 左对齐
		  aligncenter: true, // 居中
		  alignright: true, // 右对齐
		  /* 2.2.1 */
		  subfield: true, // 单双栏模式
		  preview: false // 预览
		}
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    }
  },
  methods: {
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange() {}, // 内容改变事件
    saveHtml() {
      console.log(this.content);
    },
	async imgAdd (pos, $file) {
		let formdata = new FormData();
		formdata.append('image', $file);
		this.img_file[pos] = $file;
		var config = {headers: {'content-type': 'multipart/form-data'}}
		const res = await uploadImage(formdata, config);
		if (res.code !== 0) return this.$message.error("上传图片失败");
		this.$refs.md.$img2Url(pos, this.domain + res.data.url)
	 },
	async imgDel (pos) {
	  delete this.img_file[pos];
	  var img_path = pos[0].replace(this.domain+"/", '');
	  const res = await deleteFile({'path': img_path});
	  if (res.code !== 0) return this.$message.error("删除图片失败");
	},
	submit(html){
		console.log(this.model.content);
	},
  }
}
</script>
<style lang="scss" scope>
  .edit_container {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
	h1{
		margin-bottom: 20px;
	}
  }
  .ql-editor{
    min-height:200px;
  }
  .quill_preview{
	min-height: 200px;
	border: 1px solid #000;
  }
  .edit h1{
	  margin: 20px auto;
  }
</style>